<template>
	<view class="container">
		<u-navbar title='发布消息' :autoBack="true" leftIconColor="#1E272E" bgColor="transparent"
			:titleStyle="{fontWeight:700,fontSize:'32rpx',color:'#1E272E'}"></u-navbar>
		<view class="richtext">
			<view class="title flex">
				<text style="color:red;margin-right: 10rx;">*</text>发布标题：
				<view class="val" style="width: 300rpx;">
					<u-input v-model="title" placeholder="请输入发布标题"></u-input>
				</view>
			</view>
			<view class="title flex">
				<text style="color:red;margin-right: 10rx;">*</text>发布内容<u-icon name="edit-pen-fill" color="#2979ff"
					size="30rpx"></u-icon>：
			</view>
			<piaoyiEditor :values="values" :maxlength="3000" @changes="saveContens" :readOnly="readOnly"
				:photoUrl="photoUrl" :api="api" :name="name" />
			<view class="title flex" style="justify-content: space-between;">
				<view class="flex">
					<text style="color:red;margin-right: 10rx;">*</text>公开范围:{{scopeText}}
				</view>
			</view>
			<view style="padding-left: 30rpx;">
				<u-radio-group v-model="radiovalue1" placement="column" @change="radioChange">
					<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1" :key="index"
						:label="item.label" :name="index">
					</u-radio>
				</u-radio-group>
			</view>
			<view class="flex" style="margin-top: 100rpx;">
				<view style="margin-right: 20rpx;flex: 1;">
					<u-button style="height: 88rpx;" @click="closePublic">取消</u-button>
				</view>
				<view style="flex: 1;">
					<u-button style="height: 88rpx;" color='#13989a' @click="public">发布</u-button>
				</view>
			</view>
		</view>

		<u-popup :show="specifyScopeShow" @close="specifyScopeShow=false" round="10" mode="bottom">
			<view class="overdueForm" style="padding-top: 20rpx;">
				<view style="text-align: center;font-size: 30rpx;margin-bottom: 50rpx;">
					{{showText}}
				</view>
				<view style="font-size: 30rpx;margin-bottom: 20rpx;">
					已选：{{checkboxValue1Text}}
				</view>
				<view class="flex alignItem bewteen" style="margin-bottom: 50rpx;">
					<checkbox-group @change="checkboxChange">
						<label v-for="(item, index) in checkboxList1" :key="index" v-if="specifyScopeShow">
							<checkbox :value="item.name" color="#13989a" :checked="item.checked">{{item.lable}}
							</checkbox>
						</label>
					</checkbox-group>
				</view>
				<view class="flex">
					<view style="margin-right: 20rpx;flex: 1;">
						<u-button style="height: 88rpx;" @click="specifyScopeShow=false">取消</u-button>
					</view>
					<view style="flex: 1;">
						<u-button style="height: 88rpx;" color='#13989a' @click="submit">确定</u-button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import systemConfig from '@/api/systemConfig.js'
	import piaoyiEditor from '@/uni_modules/piaoyi-editor/components/piaoyi-editor/piaoyi-editor.vue';
	export default {
		data() {
			return {
				title: null,
				scope: null,
				checkboxValue1: [],

				// 基本案列数据
				checkboxList1: [],
				specifyScopeShow: false,
				readOnly: false, //是否只读
				photoUrl: systemConfig.apiUrl, //服务器图片域名或者ip
				api: 'img/fileImgUrl', //上传图片接口地址
				txt: '',
				name: 'file',
				values: '',
				showText: '',
				comanyList: [],
				userList: [],
				currentIndex: null,
				oldScopeValue: null,
				// 基本案列数据
				radiolist1: [{
						label: '全部装修公司可见',
					},
					{
						label: '指定装修公司可见',
					},
					{
						label: '指定用户可见',
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue1: null,
			};
		},
		components: {
			piaoyiEditor
		},
		created() {
			this.getCompanyVo()
			this.getCustomerVo()
		},
		watch: {
			currentIndex(olddata, newdata) {
				this.checkboxValue1 = []
				this.scope = null
				this.oldScopeValue = olddata
			}
		},
		computed: {
			checkboxValue1Text() {
				if (this.checkboxValue1) {
					if (this.currentIndex == 1) {
						let text = ''
						this.checkboxValue1.forEach(item => {
							if (text.length) {
								text = text + '、' + this.comanyList.find(element => element.name == item).lable;
							} else {
								text = this.comanyList.find(element => element.name == item).lable;
							}
						})
						return text
					}
					if (this.currentIndex == 2) {
						let text = ''
						this.checkboxValue1.forEach(item => {
							if (text.length) {
								text = text + '、' + this.userList.find(element => element.name == item).lable;
							} else {
								text = this.userList.find(element => element.name == item).lable;
							}
						})
						return text
					}

				} else {
					return ''
				}

			},
			scopeText() {
				if (this.scope) {
					if (this.currentIndex == 1) {
						let text = ''
						this.scope.forEach(item => {
							if (text.length) {
								text = text + '、' + this.comanyList.find(element => element.name == item).lable;
							} else {
								text = this.comanyList.find(element => element.name == item).lable;
							}
						})
						return text
					}
					if (this.currentIndex == 2) {
						let text = ''
						this.scope.forEach(item => {
							if (text.length) {
								text = text + '、' + this.userList.find(element => element.name == item).lable;
							} else {
								text = this.userList.find(element => element.name == item).lable;
							}
						})
						return text
					}
				} else {
					return ''
				}
			}
		},
		methods: {
			closePublic() {
				uni.showModal({
					title: '提示:',
					content: '取消后系统不会保存编辑内容，是否取消？',
					success: (res) => {
						if (res.confirm) {
							uni.redirectTo({
								url:`/packageA/pages/noticeList/index`
							})
						} else if (res.cancel) {

						}

					}
				})
			},
			public() {
				uni.$u.http.post('/company/addBrandMessage', {
					title: this.title,
					content: this.txt,
					ids: this.currentIndex == 0 ? this.comanyList.map(item => item.name) : this.scope,
					flag: this.currentIndex == 2 ? 2 : 1
				}).then(res => {
					if (res) {
						uni.showToast({
							title: '发布成功',
							duration: 1000,
							mask: true,
							complete: () => {
								setTimeout(() => {
									uni.redirectTo({
										url:`/packageA/pages/noticeList/index`
									})
								}, 1000)
							}
						});
					}
				})

			},
			getCompanyVo() {
				uni.$u.http.get('/company/getCompanyVo').then(res => {
					this.comanyList = res.map(item => {
						return {
							name: item.userId,
							lable: item.companyName,
							checked: false
						}
					})
				})
			},
			getCustomerVo() {
				uni.$u.http.get('/company/getCustomerVo').then(res => {
					this.userList = res.map(item => {
						return {
							name: item.customerId,
							lable: item.userName,
							checked: false
						}
					})
				})
			},
			submit() {
				if (this.currentIndex == 1) {
					const temp = this.comanyList.map(item => {
						if (this.checkboxValue1.includes(item.name.toString())) {
							return {
								...item,
								checked: true
							}
						} else {
							return {
								...item,
								checked: false
							}
						}
					})
					this.comanyList = JSON.parse(JSON.stringify(temp))
				}
				if (this.currentIndex == 2) {
					const temp = this.userList.map(item => {
						if (this.checkboxValue1.includes(item.name.toString())) {
							return {
								...item,
								checked: true
							}
						} else {
							return {
								...item,
								checked: false
							}
						}
					})
					this.userList = JSON.parse(JSON.stringify(temp))
				}
				this.scope = JSON.parse(JSON.stringify(this.checkboxValue1))
				this.specifyScopeShow = false
			},
			checkboxChange(n) {
				this.checkboxValue1 = n.detail.value
				console.log('change', this.checkboxValue1);
			},
			saveContens(e) {
				this.txt = e.html
			},
			radioChange(n) {
				this.currentIndex = n
				if (n == 1) {
					this.showText = "指定可见的装修公司"
					if (this.oldScopeValue == n) {
						console.log(this.oldScopeValue == n)
						this.checkboxList1 = JSON.parse(JSON.stringify(this.comanyList))
					} else {
						const temp = this.comanyList.map(item => {
							return {
								...item,
								checked: false
							}
						})
						this.comanyList = JSON.parse(JSON.stringify(temp))
						this.checkboxList1 = JSON.parse(JSON.stringify(this.comanyList))
					}
					this.specifyScopeShow = true
				} else if (n == 2) {
					this.showText = "指定可见的用户"
					if (this.oldScopeValue == n) {
						console.log(this.oldScopeValue == n)
						this.checkboxList1 = JSON.parse(JSON.stringify(this.userList))
					} else {
						const temp = this.userList.map(item => {
							return {
								...item,
								checked: false
							}
						})
						this.userList = JSON.parse(JSON.stringify(temp))
						this.checkboxList1 = JSON.parse(JSON.stringify(this.userList))
					}
					this.specifyScopeShow = true
				}
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '多功能富文本编辑器！',
				path: '/pages/editor/editor'
			}
		},
		onShareTimeline(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '多功能富文本编辑器！'
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep.overdueForm {
		padding: 100rpx 30rpx 50rpx 30rpx;
	}

	::v-deep.container {
		overflow-y: scroll;
		position: relative;
		padding: 200rpx 30rpx 30rpx 30rpx;

		.title {
			font-size: 30rpx;
			line-height: 60rpx;
			padding-left: 30rpx;
		}

	}

	::v-deep.richtext {
		background-color: #fff;
		padding: 20rpx 0 0rpx 0;

		.editor {
			min-height: 680rpx !important;
			height: auto;
		}
	}
</style>